<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium'

import { onMounted  } from 'vue';
let viewer = null;
const initMap = () => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5Yjc0MTYzMS1mMmZmLTRiNTctODZhMi1mZjRjYzQ2NTFmMWEiLCJpZCI6MTMyNDAyLCJpYXQiOjE2ODA3NjYzMDF9.9Jj665lzy-TlV5dJkSBZKBmHnSaqyOVrRM5cvI_t8rg";
  // viewer =  new Cesium.Viewer("cesiumContainer")
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    enablePickFeatures: false,
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/world_Imagery/MapServer"
  });

  //1、创建视图
  viewer = new Cesium.Viewer("cesiumContainer",{
    imageryProvider: esri, //使用argis的影像图层,如果不指定，默认就是用的谷歌的
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask:true ,//添加水面特效
    }),//创建地形图层
    timeline:false,// 隐藏时间轴
    animation:false,// 动画控件
    geocoder:false,//右上角搜索按钮
    homeButton:false,//主页按钮
    sceneModePicker:false,//投影方式
    baseLayerPicker:false,// 底图选择
    navigationHelpButton:false,//帮助手势
    fullscreenButton:false,//全屏按钮
    
  })

  //经纬度转笛卡尔坐标
  const position  = new Cesium.Cartesian3.fromDegrees(105.07146143839523, 28.70889712032565, 800.0);//经纬度转成笛卡尔坐标：(经度、纬度、离地高度) --->笛卡尔坐标：(横(X)、纵(y)、离地的高度(z)) 
  
  //2、设置相机
  //2.1直接定位用setView
//   viewer.camera.setView({
//     destination : position,//相机视口的目的地
//     /**
//      * orientation是用来控制相机的
//      * heading(偏航角)、
//      * pitch(仰俯角)
//      * roll(防滚角)
//      * 最简单的理解就是相机镜头当前浏览器窗口所在的位置
//      */
//     orientation : {
//         heading : Cesium.Math.toRadians(0),//左右转动角度
//         pitch : Cesium.Math.toRadians(0),//上下抬头高度
//         roll : 0.0 //z轴上的旋转角度
//     },
// });

  //2.2飞行动画效果，用flyTo
  // viewer.camera.flyTo({
  //   destination : position,//相机视口的目的地
  //   orientation : {
  //       heading : Cesium.Math.toRadians(0),//左右转动角度
  //       pitch : Cesium.Math.toRadians(-20),//上下抬头高度
  //       roll : 0.0 //z轴上的旋转角度
  //   },
  //   duration:2,//飞行时间（秒）
  //   complete:function(){
  //       // that.showParticalSystem()
  //       debugger
  //   }
  // });
  
  //2.3 lookAt 锁住视角，只能定焦到一个点
  viewer.camera.lookAt(position,
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(-90),
      2000
    ))
}
onMounted( () => {
  initMap();
})
</script>
<style scoped lang="scss">
#app{
  width:100vw;
  /* height: 100vh; */
}
#cecsium{
  width: 100vw;
  height: 200vh;
}

:deep(){
  // 隐藏左下角的Cesium logo
  .cesium-viewer .cesium-viewer-bottom{
    display: none;
  }
}
</style>
